<template>
  <div>
    <h1>个人简介</h1>
    <div>姓名:{{ person.name }} <button @click="person.name='monica'">改名</button></div>
    <div>年龄:{{ person.age }} <button @click="person.age++">改年龄</button></div>
    <div>工作:{{ person.job }} <button @click="person.job='enginee'">改工作</button></div>
  </div>
</template>
<!-- 
组合式API中的watch如果监听的是对象，这里的deep设置是无效的，不管设置不设置都能监听到
 -->
<script lang='ts' setup>

import { reactive,watch} from 'vue'
interface PersonType{
  name:string
  age:number
  job:string
}
let person=reactive<PersonType>({
  name:'Giles',
  age:39,
  job:'teacher'
})
//let newPerson=computed(()=>JSON.parse(JSON.stringify(person)))
// watch(newPerson,(newval,oldval)=>{
//   console.log(newval,oldval);
// },{deep:true})
watch(()=>person.name,(newval,oldaval)=>{
  console.log(newval,oldaval)
})
</script>

<style lang='scss' scoped>
</style>